<template>
  <div class="header">
    <Menu :theme="theme" :active-name="currentMenu" mode="horizontal" @on-select="appItem">
      <div class="avatar" @click="forward">
        <!-- <img width="90" height="60" src="./logo.jpg">-->
        <!-- <router-link to="/">XPAY支付</router-link>-->
        <span v-if="theme == 'primary'">XPAY支付</span>
        <span v-if="theme == 'light'" style="color: #30a9fa">XPAY支付</span>
      </div>
      <div v-if="menu" class="nav">
        <MenuItem name="/appCenter/">
          <Icon type="ios-paper"></Icon>
          应用中心
        </MenuItem>
        <MenuItem name="/appManager/">
          <Icon type="ios-people"></Icon>
          应用管理
        </MenuItem>
      </div>
      <!--     <div style="position: absolute;right: 250px;color: yellow">
             未认证
           </div>-->
      <div v-if="login" class="userMenu">
        <!--        <MenuItem name="/optDoc/">
                  <Icon type="ios-paper"></Icon>
                  帮助文档
                </MenuItem>-->

        <Submenu name="">
          <template slot="title">
            <Icon type="person"></Icon>
            {{mobile}}
          </template>
          <MenuItem name="/user/accountInfo">信息概况</MenuItem>
          <MenuItem name="/user/secretManager">密钥管理</MenuItem>
          <MenuItem name="/user/setting">设置</MenuItem>
        </Submenu>
        <MenuItem name="/logout" class="logout">
          <I type="logout"/>
          退出
        </MenuItem>
      </div>
    </Menu>
  </div>
</template>

<script type="text/ecmascript-6">
  import storage from '@/utils/helpers/storageLite'
  import Model1 from '@/models/apps'
  import {mapState} from 'vuex'
  export default{
    name: 'header',
    data () {
      return {
        show: true,
        mobile: null,
        currentMenu: ''
      }
    },
    props: {
      login: {
        default: false
      },
      menu: {
        default: false
      },
      theme: {
        default: 'primary'
      }
    },
    computed: mapState({
      'menu1': state => state.menu1
    }),
    created () {
      this.mobile = storage.get('mobile')
      this.update1()
    },
    methods: {
      handleLogout () {
        new Model1('logout')
          .GET({
            params: {
              userNo: storage.get('userNo')
            }
          })
          .then((res) => {
            if (res.data.errorCode === '200') {
              this.$router.push('/logout')
              this.$Message.success('退出成功')
            }
          })
      },
      appItem (name) {
        if (name === '/logout') {
          this.handleLogout()
        } else if (this.startWith(name, '/app')) {
          this.$router.push(name + this.$route.params.id + '/' + (name === '/appCenter/' ? 'summary' : 'baseInfo'))
        } else if (this.startWith(name, '/user')) {
          this.$router.push(name)
        } else {
          this.$router.push(name + 'quickGuidance')
        }
      },
      startWith (originalStr, str) {
        var reg = new RegExp('^' + str)
        return reg.test(originalStr)
      },
      update1 (route) {
        const path = route ? route.path : this.$route.path
        const activeMenu = '/' + path.split('/')[1] + '/'
        this.currentMenu = activeMenu
      },
      forward () {
        const userNo = storage.get('userNo')
        if (userNo === null || userNo === '') {
          return
        }
        new Model1('allApps')
          .GET({
            params: {
              userNo: storage.get('userNo')
            }
          })
          .then((res) => {
            this.$router.push('/appCenter/' + res.data.data[0].id + '/summary')
          })
      }
    }
  }
</script>

<style scoped>
  .header {
    position: relative;
    width: 100%;
    height: 60px;
  }

  .avatar {
    width: 238px;
    height: 30px;
    line-height: 30px;
    text-align: left;
    padding-left: 2px;
    font-size: 30px;
    font-weight: bold;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }

  .avatar {
    color: white;
    cursor: pointer;
  }

  .nav {
    width: 420px;
    margin-left: 100px;
  }

  .userMenu {
    position: absolute;
    top: 0px;
    right: 0px;
    color: white;
  }

  .logout {
    display: inline-block;
    cursor: pointer;
  }


</style>
